<script setup lang="tsx">
import { computed, onMounted, ref, watch } from 'vue';
import type { Crontab } from '@/service/api';
import { $t } from '@/locales';

defineOptions({
  name: 'CrontabHour'
});

interface Props {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
  check: Function;
  cron: Crontab;
}
const props = defineProps<Props>();

interface Emits {
  (e: 'update'): void;
}
const emit = defineEmits<Emits>();

const hourRadioValue = ref('1');
const hourCycle01 = ref(0);
const hourCycle02 = ref(1);
const hourAverage01 = ref(0);
const hourAverage02 = ref(1);
const hourCheckboxList = ref<string[]>([]);

const hourOptions: any = [];
function initHourOptions() {
  for (let i = 0; i < 24; i += 1) {
    hourOptions.push({
      label: i,
      value: i
    });
  }
}
initHourOptions();

function retsetParam() {
  hourCycle01.value = 0;
  hourCycle02.value = 1;
  hourAverage01.value = 0;
  hourAverage02.value = 1;
  hourCheckboxList.value = [];
}

// 计算两个周期值
const hourCycleTotal = computed(() => {
  const c01 = props.check(hourCycle01.value, 0, 22);
  const c02 = props.check(hourCycle02.value, c01 ? c01 + 1 : 1, 23);
  return `${c01}-${c02}`;
});
// 计算平均用到的值
const hourAverageTotal = computed(() => {
  const a01 = props.check(hourAverage01.value, 0, 22);
  const a02 = props.check(hourAverage02.value, 1, 23 - a01 || 0);
  return `${a01}/${a02}`;
});
// 计算勾选的checkbox值合集
const hourCheckboxString = computed(() => {
  const str = hourCheckboxList.value.join();
  return str === '' ? '*' : str;
});

watch(
  () => props.cron,
  () => {
    hourValueChange(props.cron);
  }
);
watch(
  () => hourRadioValue.value,
  () => {
    radioChange();
  }
);
watch(
  () => hourCycleTotal.value,
  () => {
    hourCycleChange();
  }
);
watch(
  () => hourAverageTotal.value,
  () => {
    hourAverageChange();
  }
);
watch(
  () => hourCheckboxString.value,
  () => {
    hourCheckboxChange();
  }
);

// 单选按钮值变化时
function radioChange() {
  if (props.cron.min === '*') {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    emit('update', 'min', '0', 'hour');
  }
  if (props.cron.second === '*') {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    emit('update', 'second', '0', 'hour');
  }
  switch (hourRadioValue.value.toString()) {
    case '1':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'hour', '*');
      break;
    case '2':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'hour', hourCycleTotal.value);
      break;
    case '3':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'hour', hourAverageTotal.value);
      break;
    case '4':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'hour', hourCheckboxString.value);
      break;
    default:
      break;
  }
}
// 周期两个值变化时
function hourCycleChange() {
  hourRadioValue.value = '2';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'hour', hourCycleTotal.value);
}
// 平均两个值变化时
function hourAverageChange() {
  hourRadioValue.value = '3';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'hour', hourAverageTotal.value);
}
// checkbox值变化时
function hourCheckboxChange() {
  hourRadioValue.value = '4';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'hour', hourCheckboxString.value);
}

function hourValueChange(cronVal: Crontab) {
  hourRadioValue.value = '';
  retsetParam();
  const val = cronVal.hour;
  if (val === '*') {
    hourRadioValue.value = '1';
  } else if (val.includes('-')) {
    hourRadioValue.value = '2';
    const v = val.split('-');
    hourCycle01.value = Number.parseInt(v[0], 10);
    hourCycle02.value = Number.parseInt(v[1], 10);
  } else if (val.includes('/')) {
    hourRadioValue.value = '3';
    const v = val.split('/');
    hourAverage01.value = Number.parseInt(v[0], 10);
    hourAverage02.value = Number.parseInt(v[1], 10);
  } else {
    hourRadioValue.value = '4';
    hourCheckboxList.value = val.split(',');
  }
}

onMounted(() => {
  const cronVal = props.cron;
  hourValueChange(cronVal);
});
</script>

<template>
  <div>
    <NForm>
      <NRadioGroup v-model:value="hourRadioValue">
        <NFormItem class="form-item-height">
          <NRadio value="1">{{ $t('common.job.hourOne') }}</NRadio>
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="2" />
          &nbsp;{{ $t('common.job.hourTwoPre') }}&nbsp;
          <NInputNumber v-model:value="hourCycle01" :min="0" :max="22" button-placement="both"></NInputNumber>
          &nbsp;-&nbsp;
          <NInputNumber
            v-model:value="hourCycle02"
            :min="hourCycle01 ? hourCycle01 + 1 : 1"
            :max="23"
            button-placement="both"
          />
          &nbsp;{{ $t('common.job.hourTwoSuf') }}
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="3" />
          &nbsp;{{ $t('common.job.hourThreePre') }}&nbsp;
          <NInputNumber v-model:value="hourAverage01" :min="0" :max="22" button-placement="both" />
          &nbsp;{{ $t('common.job.hourThreeMid') }}&nbsp;
          <NInputNumber v-model:value="hourAverage02" :min="1" :max="23 - hourAverage01 || 0" button-placement="both" />
          &nbsp;{{ $t('common.job.hourThreeSuf') }}
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="4" />
          &nbsp;{{ $t('common.job.specify') }}&nbsp;
          <NSelect
            v-model:value="hourCheckboxList"
            :options="hourOptions"
            multiple
            class="w-50%"
            :placeholder="$t('common.job.multipleChoices')"
          />
        </NFormItem>
      </NRadioGroup>
    </NForm>
  </div>
</template>

<style scoped>
.form-item-height {
  --n-blank-height: 0px !important;
  --n-feedback-height: 0px !important;
}
</style>
